@import "../less/px2rem.less";
@import "./common.less";

// 首页
.home {
    .swipers {
        .px2rem(98);
        padding-top: @px2rem;

        .swiper {
            .px2rem(500);
            height: @px2rem;
            overflow: hidden;
        }

        .swiper {
            .px2rem(1100);
            width: @px2rem;

            img {
                width: 100%;
                height: 100%;
            }
        }
    }

    // 导航栏部分
    .nav {
        background-color: #ffffff;

        ul {
            width: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;

            li {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                .px2rem(30);
                padding: @px2rem 0;

                img {
                    .px2rem(100);
                    width: @px2rem;
                    height: @px2rem;
                    display: block;
                }

                span {
                    .px2rem(22);
                    font-size: @px2rem;
                    color: #333;
                }

                span {
                    .px2rem(10);
                    padding-top: @px2rem;
                }
            }
        }
    }

    // 内容部分
    .bodyblock {
        .px2rem(20);
        margin-top: @px2rem;

        .block-active {
            ul {
                .items {
                    width: 100%;
                    .px2rem(30);
                    padding: 0 @px2rem @px2rem @px2rem;
                    background-color: #ffffff;
                    margin-top: @px2rem;

                    .title {
                        .px2rem(90);
                        height: @px2rem;
                        display: flex;
                        align-items: center;

                        img {
                            .px2rem(130);
                            width: @px2rem;
                        }

                        img {
                            .px2rem(50);
                            height: @px2rem;
                        }

                        span {
                            .px2rem(16);
                            font-size: @px2rem;
                            color: #999999;
                        }

                        span {
                            .px2rem(20);
                            padding-left: @px2rem;
                        }
                    }

                    .content {
                        .px2rem(10);
                        padding-top: @px2rem;
                        display: flex;
                        justify-content: space-between;
                        flex-wrap: wrap;

                        li {
                            width: 49%;
                            display: flex;
                            justify-content: start;
                            flex-wrap: nowrap;
                            .px2rem(20);
                            padding: @px2rem 0;

                            &:nth-child(2n) {
                                .px2rem(20);
                                padding-left: @px2rem;
                            }

                            img {
                                .px2rem(120);
                                width: @px2rem;
                                height: @px2rem;
                            }

                            img {
                                .px2rem(10);
                                margin-top: @px2rem;
                            }

                            .rt {
                                width: 76%;
                                .px2rem(20);
                                padding-left: @px2rem;
                                display: flex;
                                flex-direction: column;
                                justify-content: space-between;

                                .smallTitle {
                                    .ellipsis();
                                    color: #333;
                                    .px2rem(22);
                                    font-size: @px2rem;
                                }

                                .smallTitle {
                                    .px2rem(10);
                                    padding-bottom: @px2rem;
                                }

                                .introduce {
                                    .ellipsis2();
                                    color: #666;
                                }
                            }
                        }
                    }
                }

                .items {
                    .px2rem(15);
                    padding-top: @px2rem;
                }
            }
        }

        .recommend {
            .px2rem(30);
            margin-top: @px2rem;
            background-color: #ffffff;
            width: 100%;

            img {
                width: 100%;
                height: 100%;
            }
        }

        .recommend {
            .px2rem(100);
            height: @px2rem;
        }

        .hot-sale {
            .px2rem(30);
            margin-top: @px2rem;
            background-color: #ffffff;

            .title {
                .px2rem(120);
                height: @px2rem;
                line-height: @px2rem;
            }

            .title {
                .px2rem(44);
                font-size: @px2rem;
                font-weight: 700;
            }

            .title {
                .px2rem(40);
                padding-left: @px2rem;

                span {
                    .px2rem(10);
                    border-left: @px2rem solid rgb(255, 25, 11);
                }

                span {
                    .px2rem(30);
                    padding-left: @px2rem;
                    color: #FF5A27;
                }
            }

            .sale-bodyblock {
                ul {
                    display: flex;
                    justify-content: space-between;
                    flex-wrap: wrap;

                    li {
                        box-sizing: border-box;
                        width: 33.33%;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        .px2rem(30);
                        margin-bottom: @px2rem;

                        img {
                            .px2rem(300);
                            width: @px2rem;
                            height: @px2rem;
                        }

                        p {
                            color: #333333;
                            .px2rem(34);
                            margin: 0 @px2rem;
                            .ellipsis2();
                        }

                        p {
                            .px2rem(20);
                            margin-top: @px2rem;
                            margin-bottom: @px2rem;
                        }

                        .hot-bt {
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            width: 90%;
                            .px2rem(34);
                            margin: 0 @px2rem;

                            .mark,
                            .price {
                                color: #F40;
                            }

                            .mark {
                                .px2rem(12);
                                font-size: @px2rem;
                            }

                            .price {
                                .px2rem(40);
                                font-size: @px2rem;
                            }

                            .volume {
                                .px2rem(12);
                                font-size: @px2rem;
                                color: #999999;
                            }
                        }
                    }
                }

                ul:after {
                    // 使用伪类元素占据单位，不影响页面
                    content: "";
                    height: 0;
                    width: 33.33%;
                }
            }
        }
    }

    .bodyblock {
        .px2rem(170);
        padding-bottom: @px2rem;
    }


}

// 我的页面
.my {
    background-color: #EBEFF8;

    .bodyblock {
        .px2rem(98);
        padding-top: @px2rem;

        .top {
            .px2rem(400);
            height: @px2rem;
            width: 100%;
        }

        .top {
            .px2rem(-500);
            background: url("../images/bg.jpg") no-repeat @px2rem 0px;

            .actor {
                .px2rem(100);
                padding: @px2rem;
            }

            .actor {
                .px2rem(150);
                padding-left: @px2rem;
                display: flex;
                justify-content: start;
                align-items: center;

                .set-avator {
                    position: relative;
                    .px2rem(300);
                    width: @px2rem;
                }

                .set-avator {
                    position: relative;
                    .px2rem(200);
                    height: @px2rem;

                    input {
                        .px2rem(200);
                        height: @px2rem;
                        width: @px2rem;
                        border-radius: 50%;
                        position: absolute;
                        left: 0;
                        top: 0;
                        z-index: 5;
                        opacity: 0;
                    }

                    img {
                        .px2rem(200);
                        height: @px2rem;
                        width: @px2rem;
                        border-radius: 50%;
                        position: absolute;
                        left: 0;
                        top: 0;
                    }
                }


                .text {
                    .px2rem(46);
                    padding-left: @px2rem;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;

                    .user-name {
                        .px2rem(46);
                        font-size: @px2rem;
                    }

                    .user-name {
                        .px2rem(20);
                        padding-bottom: @px2rem;
                    }

                    .sign {
                        color: #333333;
                    }

                    // span {
                    //     .px2rem(46);
                    //     font-size: @px2rem;
                    // }
                }


            }

        }

        .order {
            background-color: #fff;

            .order-top {
                .px2rem(108);
                height: @px2rem;
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .order-top {
                .px2rem(30);
                padding: 0 @px2rem;
                border-bottom: 1px solid #e8e8e8;

                .left {
                    color: #333333;
                    .px2rem(36);
                    font-size: @px2rem;
                    font-weight: 700;
                }

                .right {
                    color: #999;
                    .px2rem(20);
                    font-size: @px2rem;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    span {
                        .px2rem(16);
                        font-size: @px2rem;
                    }

                    img {
                        .px2rem(20);
                        width: @px2rem;
                        margin-left: @px2rem;
                    }

                    img {
                        .px2rem(35);
                        height: @px2rem;
                        display: block;
                    }
                }
            }

            .order-bt {
                .order-ul {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .px2rem(168);
                    height: @px2rem;

                    .order-li {
                        width: 25%;
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        justify-content: center;

                        img {
                            .px2rem(50);
                            width: @px2rem;
                            height: @px2rem;
                        }

                        span {
                            color: #666;
                            .px2rem(10);
                            padding-top: @px2rem;
                        }
                    }
                }
            }
        }

        .about {
            .px2rem(25);
            margin-top: @px2rem;

            .about-ul {
                background-color: #fff;

            }

            .about-li {
                display: flex;
                justify-content: space-between;
                align-items: center;
                .px2rem(128);
                height: @px2rem;

                .left {
                    .px2rem(150);
                    width: @px2rem;
                    display: flex;
                    justify-content: center;
                    align-items: center;

                    img {
                        .px2rem(60);
                        width: @px2rem;
                        height: @px2rem
                    }
                }

                .right {
                    .px2rem(98);
                    height: @px2rem;
                }

                .right {
                    flex: 1;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    .px2rem(46);
                    font-size: @px2rem;
                    color: #999;
                    border-bottom: 1px solid #e8e8e8;

                    .lt {
                        .px2rem(26);
                        font-size: @px2rem;
                        color: #333;
                    }

                    .rt {
                        .px2rem(30);
                        padding: 0 @px2rem;

                        img {
                            .px2rem(20);
                            width: @px2rem;
                        }

                        img {
                            .px2rem(35);
                            height: @px2rem;
                            display: block;
                        }
                    }
                }

                .noborder {
                    border-bottom: 0 none;
                }
            }

            .pay-resource {
                .px2rem(25);
                margin-top: @px2rem;
                background-color: #fff;
            }
        }
    }
}

// 消息页面
.info {
    background: url('../../common/images/chat.jpg') 100% 100%;
    width: 100%;
    height: 100vh;
}

// 商品分类页面
.category {
    .px2rem(98);
    padding-top: @px2rem;

    .nav {
        width: 100%;
        position: fixed;
        .px2rem(98);
        top: @px2rem;
        left: 0;

        .tab-nav {
            width: 100%;
            overflow: scroll;
            z-index: 500;

            .tab-ul {
                display: flex;
                align-items: center;
                flex-wrap: nowrap;
                justify-content: start;
                .px2rem(108);
                height: @px2rem;
                width: 335%;
                border-bottom: 1px solid #ece9e9;
                background-color: #fff;

                .tab-li {
                    .px2rem(30);
                    padding: 0 @px2rem;
                    text-align: center;
                }

                .tab-li {
                    .px2rem(40);
                    font-size: @px2rem;
                    color: #333;
                }

                .tab-li {
                    .px2rem(108);
                    height: @px2rem;
                    line-height: @px2rem
                }

                .active {
                    color: #F85959;
                }
            }
        }

        .tab-nav::-webkit-scrollbar {
            width: 0 !important
        }

        .tab-nav {
            -ms-overflow-style: none;
        }

        .tab-nav {
            overflow: -moz-scrollbars-none;
        }

    }
}

// 关于我们 页面
.about {
    .px2rem(30);
    padding: @px2rem;
    background-color: #fff;

    .title {
        .px2rem(46);
        font-size: @px2rem;
        font-weight: 700;
        text-align: center;
        color: #333;
    }

    ul {
        .px2rem(40);
        padding-top: @px2rem;

        li {
            .px2rem(80);
            line-height: @px2rem;
            color: #333;

            .bigTitle {
                .px2rem(40);
                font-size: @px2rem;
            }

            .subTitle {
                .px2rem(30);
                padding-left: @px2rem;
            }
        }
    }
}

// 购物车页面
.cart {
    .px2rem(310);
    padding-bottom: @px2rem;
}

.cart {
    width: 100%;
    height: 100%;
    .px2rem(120);
    padding-top: @px2rem;

    .content {
        .categorys {
            .px2rem(120);
            height: @px2rem;
            line-height: @px2rem;
            border-bottom: 1px solid #eee;
            background-color: #ffffff;
        }

        .categorys {
            .px2rem(30);
            padding-left: @px2rem;
        }

        .categorys {
            .px2rem(40);
            font-size: @px2rem;
            color: #333;
        }

        .item {
            .px2rem(30);
            margin-bottom: @px2rem;
        }

        .item {
            display: flex;
            justify-content: start;
            align-items: center;
            .px2rem(20);
            padding: @px2rem;
            background-color: #fff;

            .btimg {
                .px2rem(200);
                width: @px2rem;
                height: @px2rem;
                display: block;
            }

            .btimg {
                .px2rem(30);
                margin-right: @px2rem;
            }

            .delete-item {
                .px2rem(120);
                width: @px2rem;
                background-color: #eeeeee;
            }

            .delete-item {
                .px2rem(120);
                height: @px2rem;
                line-height: @px2rem;
                text-align: center;
            }

            .delete-item {
                .px2rem(36);
                font-size: @px2rem;
                color: rgb(212, 44, 44);
            }

            .item_wrap {
                flex: 1;
                .px2rem(30);
                padding-right: @px2rem;
                display: flex;
                justify-content: space-around;
                flex-direction: column;

                .title {
                    .ellipsis2();
                    .px2rem(20);
                    margin-bottom: @px2rem;
                }

                .bottoms{
                    display: flex;
                    align-items: center;

                    .left {
                        .px2rem(30);
                        padding-right: @px2rem;
                    }

                    .left {
                        .px2rem(40);
                        font-size: @px2rem;
                        color: #FD2842;
                    }

                    .operate {
                        display: flex;
    
                        span {
                            display: block;
                        }
    
                        .operate-click {
                            .px2rem(15);
                            padding: @px2rem;
                            border: 1px solid #ccc;
                        }
    
                        .operate-click {
                            .px2rem(30);
                            padding-left: @px2rem;
                            padding-right: @px2rem;
                            font-size: @px2rem;
                        }
    
                        .operate-num {
                            .px2rem(10);
                            margin: 0 @px2rem;
                            font-size: @px2rem;
                        }
                    }
                }

                
            }
        }

        .no-data{
            margin: 200px auto;
            display: flex;
            justify-content: center;
            align-items: center;
            .px2rem(46);
            font-size: @px2rem;
        }
    }

    .select_wrap {
        .px2rem(30);
        margin-right: @px2rem;
    }

    .select_wrap {
        .px2rem(60);
        width: @px2rem;
        height: @px2rem;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
            .px2rem(60);
            width: @px2rem;
            height: @px2rem;
            display: block;
        }
    }

    .footer_wrap {
        .px2rem(20);
        padding: @px2rem 0;
        padding-left: @px2rem;
    }

    .footer_wrap {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        background-color: #fff;
        .px2rem(168);
        position: fixed;
        bottom: @px2rem;
        left: 0;
        width: 100%;

        .wrap-lt {
            display: flex;
            align-items: center;

            .lts{
                .allselect{
                    .px2rem(10);
                    padding-top: @px2rem;
                    font-size: @px2rem;
                    color: #666;
                }
            }

            .rts{
                .px2rem(43);
                font-size: @px2rem;
                color: #333;
            }

            .rts {
                .px2rem(30);
                padding-left: @px2rem;

                span{
                    color: #FD2842;
                }
            }
        }

        .wrap-rt{
            .px2rem(20);
            padding: @px2rem 0;
            background-color: #FD2842;
            margin-right: @px2rem;
        }

        .wrap-rt{
            .px2rem(50);
            padding-left: @px2rem;
            padding-right: @px2rem;
            color: #ffffff;
        }

        .wrap-rt{
            .px2rem(46);
            font-size: @px2rem;
        }
    }
}